<template>
  <el-container>
    <el-header>
      <el-row>
        <el-col :span="6">
          <el-input size="mini" v-model="input" placeholder="请输入科室编号或名称"></el-input>
        </el-col>
        <el-col :span="4" >
          <el-button size="mini" type="primary" @click="querydept()"><i class="el-icon-view"></i> 查询科室</el-button>
        </el-col>
        <el-col :span="10">
          <el-button size="mini" type="primary" @click="toAddNewDept()"><i class="el-icon-edit"></i> 新增科室</el-button>
        </el-col>
        <el-dialog :visible.sync="dialogVisible">
          <span>新增科室</span><br>
          <el-form :model="adddeptForm" label-width="80px">
            <el-form-item label="科室编码">
              <el-input v-model="adddeptForm.deptCode"></el-input>
            </el-form-item>
            <el-form-item label="科室名称">
              <el-input v-model="adddeptForm.deptName"></el-input>
            </el-form-item>
            <el-form-item label="科室分类">
              <el-select v-model="adddeptForm.deptCategoryId" placeholder="请选择">
                <el-option v-for="item in deptCategory" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                 </el-select>
            </el-form-item>
            <el-form-item label="科室类别">
              <el-select v-model="adddeptForm.DeptType" placeholder="请选择">
                <el-option v-for="item in deptType1" :key="item.ID" :label="item.DeptType" :value="item.ID"></el-option>
                 </el-select>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
              <el-button size="mini" @click="dialogVisible = false">取 消</el-button>
              <el-button size="mini" type="primary" @click="addNewdept()" >保存</el-button>
          </span>
        </el-dialog>
      </el-row>
    </el-header>
      <el-row>
        <el-col :span='24'>
      <el-table :data="deptTables">
        <el-table-column label="科室编码" prop="DeptCode"></el-table-column>
        <el-table-column label="科室名称" prop="DeptName"></el-table-column>
        <el-table-column label="科室分类" prop="ConstantName"></el-table-column>
        <el-table-column label="科室类型" prop="DeptType">
          <template slot-scope="scope">
            {{scope.row.DeptType | depttypeFilter }}
          </template>
        </el-table-column>
        <el-table-column label="操作">
         <template slot-scope="scope">
                <el-button size="mini" @click="toupdateDept(scope.$index, scope.row)">编辑</el-button>
                <el-dialog :visible.sync="updateDialogVisible">
                  <span>编辑科室</span><br>
                  <el-form :model="updateDeptForm" label-width="80px">
                    <el-form-item label="科室编码">
                      <el-input v-model="updateDeptForm.deptCode"></el-input>
                    </el-form-item>
                    <el-form-item label="科室名称">
                      <el-input v-model="updateDeptForm.deptName"></el-input>
                    </el-form-item>
                    <el-form-item label="科室分类">
                      <el-select v-model="updateDeptForm.deptCategoryId" placeholder="请选择">
                        <el-option v-for="item in deptCategory" :key="item.ID" :label="item.ConstantName" :value="item.ID"></el-option>
                         </el-select>
                    </el-form-item>
                    <el-form-item label="科室类别">
                      <el-select v-model="updateDeptForm.deptType" placeholder="请选择">
                        <el-option v-for="item in deptType1" :key="item.ID" :label="item.DeptType" :value="item.ID"></el-option>
                         </el-select>
                    </el-form-item>
                  </el-form>
                  <span slot="footer" class="dialog-footer">
                      <el-button size="mini" @click="updateDialogVisible = false">取 消</el-button>
                      <el-button size="mini" type="primary" @click="updateDrug()" >确 定</el-button>
                  </span>
                </el-dialog>
                <el-button size="mini" type="danger"  @click="getIdClickde(scope.$index, scope.row)">删除</el-button>
         </template>
        </el-table-column>
      </el-table>
      </el-col>
      </el-row>
      <el-row>
        <el-col :span='24'>
      <el-pagination layout="prev, pager, next" :total="totalNumber"  :hide-on-single-page="pageshow" @current-change="pageChange"></el-pagination>
      </el-col>
      </el-row>
  </el-container>
</template>

<script>
 import {postRequest} from '../../utils/ajaxapi'
  import {getRequest} from '../../utils/ajaxapi'
  export default {
    mounted:function(){
      this.getdept(1,10,'');
    },
    filters:{
      depttypeFilter:function(value){
        if(value == 1 || value == '1'){
          return "临床"
        }else if(value == 2 || value == '2'){
          return "医技"
        }else if(value == 3 || value == '3'){
          return "财务"
        }else if(value == 4 || value == '4'){
          return "行政"
        }else if(value == 5 || value == '5'){
          return "其他"
        }
        return '';
      }
    },
    data() {
      return {
        deptTables:[{
          DeptCode:'',
          DeptName:'',
          ConstantName:'',
          DeptType:'jhfg'
        }],
        input: '',
        dialogVisible:false,
        updateDeptForm:{
          DeptName:'',
          DeptCode:'',
          DeptCategoryId:'',
          DeptType:''
        },
        updateDialogVisible:false,
        adddeptForm:{
          DeptName:'',
          DeptCode:'',
          DeptCategoryId:'',
          DeptType:''
        },
        deptCategory:[{
        ContantCode:'',
        ConstantTypeID:'',
        ContantName:"",
        ID:'',
        DelMark:''
        }],
        deptType1:[{
          DeptCode:'',
          DeptName:'',
          DeptCategoryId:'',
          DeptType:''
        }],
        totalNumber:9,
        pageshow:false
      }
    },
    methods:{
      //增加药品
      /* addNewDrug(){
        this.$axios.post("/drugmage/addNewDrug",this.addDrugForm)
        .then(function(response){
          console.log(response)
        })
         alert(this.addDrugForm.drugsName);
        this.dialogVisible = false;
      } */


      //把post当作一个单独函数写法
      addNewdept(){
        let _this = this;
       postRequest("/deptmage/addNewDept",this.adddeptForm)
        .then(function(response){
         /* alert(_this.addDrugForm.drugsName); */
        // _this.addDrugForm.drugsName = response.data.drugsName
        })
         this.dialogVisible = false;
      },

      toAddNewDept(){
        this.getdeptByConst();
        this.dialogVisible = true;
      },

      //查询药品类型
      getdeptByConst(){
        let _this = this;
        //this.dialogVisible=true
        getRequest("/constantItem/getConstantItemByTypeid?typeid=1")
        .then(function(response){
          /* alert(response.data); */
          _this.deptCategory = response.data;
        })
        /* getRequest("/constantItem/getDeptByTypeid?typeid=2")
        .then(function(response){
           _this.deptType = response.data;
        }) */
        getRequest("/deptmage/getDept")
        .then(function(response){
          _this.deptType1 = response.data.map;
          var D
          for(D in response.data.map){
            if(D.deptType == 1 || D.deptType == '1'){
              _this.deptType1.deptType = "临床1"
            }else if(D.deptType == 2 || D.deptType == '2'){
              _this.deptType1.deptType = "医技"
            }else if(D.deptType == 3 || D.deptType == '3'){
              _this.deptType1.deptType = "财务"
            }else if(D.deptType == 4 || D.deptType == '4'){
              _this.deptType1.deptType = "行政"
            }else if(D.deptType == 5 || D.deptType == '5'){
              _this.deptType1.deptType = "其他"
            }
          }
        })
      },

      getdept(pageNumber,pageSize,deptN){
        let _this = this;
        getRequest("/deptmage/getDept?DeptName="+deptN+"&pageNumber="+pageNumber+"&pageSize="+pageSize)
        .then(function(response){
          //vue中给表格绑定的变量赋值，相当于给表格填充数据
          _this.deptTables = response.data.map;
          _this.totalNumber = response.data.pageNumber;
        })
      },

      querydept(){
        if(this.input == null){
          this.input = '';
        }
        this.getdept(1,10,this.input);
      },

      pageChange(pageNum){
        /* alert(pageNum) */
        this.getdept(pageNum,10,'')
      },

      toupdateDept(index,clickDept){
        //this.updateDialogVisible = true
        this.updateDeptForm.deptCode = this.deptTables[index].DeptCode;
        this.updateDeptForm.deptName = this.deptTables[index].DeptName;
        this.getdeptByConst()
        this.updateDeptForm.deptCategoryId = this.deptTables[index].DeptCategoryID
        this.updateDeptForm.deptType = this.deptTables[index].DeptType
        this.updateDialogVisible = true
        //localStorage.removeItem("islogin")
      },
    }
  }
</script>

<style>
</style>
